<template>
  <div>
    <el-form class="abc"  inline >
      <el-form-item  >
        <el-input class="input" placeholder="请输入优惠券兑换码" clearable />
      </el-form-item>
      
      <el-button type="primary" color="#f93684" style="vertical-align: top;width: 100px;height: 40px;">兑换</el-button>
      <el-icon :size="20" style="margin-left:100px"><Paperclip /></el-icon>
      <el-form-item style="vertical-align: bottom;">领券中心</el-form-item>
      <el-icon :size="20" style="margin-left:10px"><StarFilled /></el-icon>
      <el-form-item style="vertical-align: bottom;">历史优惠券</el-form-item>
    </el-form>
    <div class="warn">* 优惠券仅用于线下课</div>
    <span class="span">暂无数据</span>
  </div>
</template>

<script lang="ts">
    import { defineComponent} from 'vue';
    export default defineComponent({
      name: 'Coupons'
    })
</script>

<script setup lang="ts">
    import { Paperclip,StarFilled} from '@element-plus/icons-vue'

</script>

<style scoped>
  .input{
    width: 480px;
    height: 40px;
    margin-left: 20px;
  }
  .abc{
    text-align: left;
  }
  .warn{
    text-align: left;
    margin-top: 20px;
    font-size: 14px;
    color: #dba059;
    margin-left: 20px;
  }
  .span{
    font-size: 14px;
    padding: 20px 0px;
    color: #909399;
  }

</style>